// 柱状图1模块
(function() {
  // 实例化对象
  var myChart = echarts.init(document.querySelector(".bar .chart"));
  // 指定配置和数据
  var option = {
    color: ["#2f89cf"],
    tooltip: {
      trigger: "axis",
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
      }
    },
    grid: {
      left: "0%",
      top: "10px",
      right: "0%",
      bottom: "4%",
      containLabel: true
    },
    xAxis: [
      {
        type: "category",
        data: [
          "实物型",
          "服务型"
        ],
        axisTick: {
          alignWithLabel: true
        },
        axisLabel: {
          textStyle: {
            color: "rgba(255,255,255,.6)",
            fontSize: "12"
          }
        },
        axisLine: {
          show: false
        }
      }
    ],
    yAxis: [
      {
        type: "value",
        axisLabel: {
          textStyle: {
            color: "rgba(255,255,255,.6)",
            fontSize: "12"
          }
        },
        axisLine: {
          lineStyle: {
            color: "rgba(255,255,255,.1)"
            // width: 1,
            // type: "solid"
          }
        },
        splitLine: {
          lineStyle: {
            color: "rgba(255,255,255,.1)"
          }
        }
      }
    ],
    series: [
      {
        name: "交易额(万元)",
        type: "bar",
        barWidth: "35%",
        data: [2267, 8865],
        itemStyle: {
          barBorderRadius: 5
        }
      }
    ]
  };

  // 把配置给实例对象
  myChart.setOption(option);
  window.addEventListener("resize", function() {
    myChart.resize();
  });

  // 数据变化
  var dataAll = [
    // { year: "2019", data: [200, 300, 300, 900, 1500, 1200, 600] },
    // { year: "2020", data: [300, 400, 350, 800, 1800, 1400, 700] }
  ];

  $(".bar h2 ").on("click", "a", function() {
    option.series[0].data = dataAll[$(this).index()].data;
    myChart.setOption(option);
  });
})();

// 饼形图定制
// 折线图定制
(function() {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.querySelector(".pie .chart"));

  var option = {
      color: ['#61a0a8'],
      tooltip: {
          trigger: 'axis',
          axisPointer: {
              type: 'shadow'
          }
      },
      labelLine: {
          lineStyle: {
              color: '#235894'
          }
      },
      grid: {
          left: '2%',
          right: '4%',
          bottom: '10%',
          containLabel: true
      },
      xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01],
          axisLabel : {
              textStyle: {
                  color: '#ffffff'
              }
          }
      },
      yAxis: {
          type: 'category',
          data: ['食品保健', '家装家饰', '母婴用品', '美容护理', '服装鞋包', '家居用品', '珠宝配饰'],
          axisLabel : {
              textStyle: {
                  color: '#ffffff'
              }
          },
          inverse:true,
      },
      series: [
          {
              name: '零售额(万元)',
              type: 'bar',
              data: [2209, 30, 13, 6, 5, 3, 1]
          }
      ]
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  window.addEventListener("resize", function() {
    myChart.resize();
  });
})();
// 学习进度柱状图模块
(function() {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.querySelector(".bar1 .chart"));

  var data = [70, 34, 60, 78, 69];
  var titlename = ["HTML5", "CSS3", "javascript", "VUE", "NODE"];
  var valdata = [702, 350, 610, 793, 664];
  var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
  option = {

    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        left: 10,
        data: ['在线餐饮', '休闲娱乐', '生活服务', '在线旅游'],
        textStyle: {
          color: '#fft'
        }
    },
    color: ['#8dcdee','#74b3e8','#1699dd','#655be6'],
    series: [
        {
            name: '服务型网络零售',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '20',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: [
                {value: 65.03, name: '在线餐饮'},
                {value: 21.62, name: '休闲娱乐'},
                {value: 7.57, name: '生活服务'},
                {value: 5.78, name: '在线旅游'}
            ]
        }
    ]
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  window.addEventListener("resize", function() {
    myChart.resize();
  });
})();
// 折线图 优秀作品
(function() {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.querySelector(".line1 .chart"));

  option = {
      color: ['#655be6'],
      tooltip: {
          trigger: 'axis',
          axisPointer: {
              type: 'shadow'
          }
      },
      labelLine: {
          lineStyle: {
              color: '#235894'
          }
      },
      grid: {
          left: '2%',
          right: '4%',
          bottom: '10%',
          containLabel: true
      },
      xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01],
          axisLabel : {
              textStyle: {
                  color: '#ffffff'
              }
          }
      },
      yAxis: {
          type: 'category',
          data: ['水果', '草药', '茶饮', '蔬菜', '粮油', '其他农产品'],
          axisLabel : {
              textStyle: {
                  color: '#ffffff'
              }
          },
          inverse:true
      },
      series: [
          {
              name: '零售额(万元)',
              type: 'bar',
              data: [679, 160, 159, 48, 30, 2]
          }
      ]
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  window.addEventListener("resize", function() {
    myChart.resize();
  });
})();

// 点位分布统计模块
(function() {
  // 1. 实例化对象
  var myChart = echarts.init(document.querySelector(".pie1  .chart"));
  // 2. 指定配置项和数据
  var option = {
    color: ["#2f89cf"],
    tooltip: {
      trigger: "axis",
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
      }
    },
    grid: {
      left: "0%",
      top: "10px",
      right: "0%",
      bottom: "4%",
      containLabel: true
    },
    xAxis: [
      {
        type: "category",
        data: [
          "流通型",
          "生产型",
          "服务型"
        ],
        axisTick: {
          alignWithLabel: true
        },
        axisLabel: {
          textStyle: {
            color: "rgba(255,255,255,.6)",
            fontSize: "12"
          }
        },
        axisLine: {
          show: false
        }
      }
    ],
    yAxis: [
      {
        type: "value",
        axisLabel: {
          textStyle: {
            color: "rgba(255,255,255,.6)",
            fontSize: "12"
          }
        },
        axisLine: {
          lineStyle: {
            color: "rgba(255,255,255,.1)"
            // width: 1,
            // type: "solid"
          }
        },
        splitLine: {
          lineStyle: {
            color: "rgba(255,255,255,.1)"
          }
        }
      }
    ],
    series: [
      {
        name: "网商数(家)",
        type: "bar",
        barWidth: "35%",
        data: [2062, 61, 21],
        itemStyle: {
          barBorderRadius: 5
        }
      }
    ]
  };

  // 3. 配置项和数据给我们的实例化对象
  myChart.setOption(option);
  // 4. 当我们浏览器缩放的时候，图表也等比例缩放
  window.addEventListener("resize", function() {
    // 让我们的图表调用 resize这个方法
    myChart.resize();
  });
})();

(function() {
  // 1. 实例化对象
  var myChart = echarts.init(document.querySelector(".pier  .chart"));
  // 2. 指定配置项和数据
  var option = {
      tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
      },
      legend: {
          orient: 'vertical',
          left: 'left',
          data: ['食品保健', '家装家饰', '母婴用品', '美容护理', '服装鞋包', '家居用品', '珠宝配饰'],
          textStyle: {
            color: "rgba(255,255,255,.6)"
          }
      },
      series: [
          {
              name: '零售额占比',
              type: 'pie',
              radius: '55%',
              center: ['50%', '60%'],
              data: [
                  {value: 97.45, name: '食品保健'},
                  {value: 1.31, name: '家装家饰'},
                  {value: 0.56, name: '母婴用品'},
                  {value: 0.27, name: '美容护理'},
                  {value: 0.23, name: '服装鞋包'},
                  {value: 0.11, name: '家居用品'},
                  {value: 0.06, name: '珠宝配饰'}
              ],
              emphasis: {
                  itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
              }
          }
      ]
  };

  // 3. 配置项和数据给我们的实例化对象
  myChart.setOption(option);
  // 4. 当我们浏览器缩放的时候，图表也等比例缩放
  window.addEventListener("resize", function() {
    // 让我们的图表调用 resize这个方法
    myChart.resize();
  });
})();
